<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div style="width: 100%;">
    <div style="width: 100%;">
      <div style="display: flex; padding: 1px 15px;align-items: center;">
        <!-- 组件1 : 新增按钮 + 菜单名称 -->
        <el-button type="primary" @click="add">新建</el-button>
        <span style="margin-left: 10px; font-size: 20px;">菜单</span>
        <div style="margin-left: auto;margin-right: auto;" class="search-operation-container">
          <!-- 搜索框 -->
          <ISearch :fieldsConfig="searchDataConfig || []" @searchCallBack="searchCallBack"
            v-if="multipleSelection.length == 0"></ISearch>
          <!-- 操作按钮组 -->
          <div v-else>
            <el-button type="primary" style="background-color: #f1edf0; color: #714B67;">
              {{ "(" + multipleSelection.length + ") 已选取" }}
            </el-button>
            <el-dropdown trigger="click" popper-class="operation-dropdown" @command="handleOperationCommand">
              <el-button type="primary">
                <el-icon>
                  <Tools />
                </el-icon> 操作 <i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="delete">删除</el-dropdown-item>
                  <el-dropdown-item command="export">导出</el-dropdown-item>
                  <el-dropdown-item command="archive">归档</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </div>
      </div>
    </div>
    <!-- 分割线 -->
    <el-divider border-style="dotted" />

    <div style="display: flex; height: 100vh;">
      <!-- 菜单列表 -->
      <div class="main-left-area">
        <div style="padding: 15px">
          <el-icon>
            <Menu />
          </el-icon>
          <span style="font-size: 15px; font-weight: 600;"> 模块列表 </span>
        </div>
        <div class="menu-item" v-for="(menu, index) in moduleList" :key="menu.id" :index="index"
          :class="{ 'active': activeModule == menu.id }" @click="handleMenuSelect(menu.id || '',menu)">
          <img :src="menu.icon" alt="" class="menu-icon">
          <span class="menu-text">{{ menu.menuName }}</span>
        </div>
      </div>
      <!-- 表格列表 -->
      <div style="display: flex;flex-direction: column; height: auto;position: relative; width: 100%;flex: 1;">
        <el-table ref="multipleTableRef" :data="menuList" style="width: 100%" @selection-change="handleSelectionChange"
        @row-click="(row) => router.push({ path: '/setting-menus/add', query: { id: row.id , moduleKey: activeModuleKey } })"
        row-key="id" default-expand-all>
          <el-table-column type="selection" width="55" />
          <el-table-column prop="menuName" label="菜单名称" width="380" />
          <el-table-column prop="menuType" label="菜单类型" sortable width="380">
            <template #default="scope">
              {{ codeStore().getSystemCodeName("SYSTEM_MENU_TYPE", scope.row.menuType) }}
            </template>
          </el-table-column>
          <el-table-column prop="status" label="菜单状态" width="380" >
            <template #default="scope">
              {{ codeStore().getSystemCodeName("SYSTEM_TABLE_STATUS", scope.row.status) }}
            </template>
          </el-table-column>
          <el-table-column prop="icon" label="菜单图标" width="380" />
          <el-table-column prop="createTime" label="创建时间"/>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { Tools, Menu } from '@element-plus/icons-vue'
import ISearch from '@/components/base/search/index.vue'
import type { SearchDataStruct } from '@/components/base/search';
import router from '@/router';
import { _getAllModules, _getMenusByModuleId } from '@/api/generic/menu/menu-api';
import type { MenuInfo } from '@/api/generic/menu/menu-api';
import { _imageRealPath_1 } from '@/utils/imageUtil';
import { codeStore } from '@/stores/codeStore';

//列表勾选得内容
const multipleSelection = ref<[]>([]);
//模块列表数据
const moduleList = ref<MenuInfo[]>([]);
//菜单列表数据
const menuList = ref<MenuInfo[]>([]);
//当前选中的菜单
const activeModule = ref('');
//搜索框参数
const searchDataConfig = ref<Array<SearchDataStruct>>();
const activeModuleKey = ref<string>('')
//表格勾选
const handleSelectionChange = (val: []) => {
  multipleSelection.value = val
}

//菜单点击
const handleMenuSelect = async (index: string,moduleInfo:MenuInfo) => {
  console.log('选中菜单:', index);
  activeModule.value = index;
  if (activeModule.value) {
    const menusRes = await _getMenusByModuleId(activeModule.value)
    console.log("menusRes:", menusRes)
    if (menusRes) {
      menuList.value = menusRes.data;
    }
    activeModuleKey.value = moduleInfo.moduleKey ?? '';
  }
}

//搜索框回调
const searchCallBack = (callbackItem: object) => {
  console.log("搜索回调", callbackItem)
}

const add = () => {
  console.log("activeModuleKey:", activeModuleKey.value)
  router.push({
    path: '/setting-menus/add',
    query: { moduleKey: activeModuleKey.value }
  })
}

onMounted(async () => {
  //获取所有模块信息
  const modulesRes = await _getAllModules();
  console.log("modulesRes:", modulesRes)
  if (modulesRes) {
    moduleList.value = modulesRes.data;
    if (moduleList.value.length > 0) {
      //构造图片路径
      moduleList.value.forEach(menu => {
        if (menu.icon) {
          menu.icon = _imageRealPath_1(import.meta.url, menu.icon, '.png');
        }
      });
      console.log("moduleList:", moduleList.value)
      activeModule.value = moduleList.value[0].id || '';
      activeModuleKey.value = moduleList.value[0].moduleKey ?? '';
      if (activeModule.value) {
        const menusRes = await _getMenusByModuleId(activeModule.value)
        console.log("menusRes:", menusRes)
        if (menusRes) {
          menuList.value = menusRes.data;
        }
      }
    }
  }
});

const handleOperationCommand = (command: string) => {
  console.log("操作命令:", command);
  console.log("选中的数据", multipleSelection.value)
  // 根据不同命令执行相应操作
  if (command === "delete") {
    // TODO: 删除操作逻辑
  } else if (command === "export") {
    // TODO: 导出操作逻辑
  } else if (command === "archive") {
    // TODO: 归档操作逻辑
  }
}
</script>

<style scoped>
:deep(.el-divider--horizontal) {
  margin: 20px 0px 0px !important;
}

.main-left-area {
  border-right: 1px solid #dcdfe6;
  width: 200px;
  min-height: 400px;
  overflow: auto;
}

.menu-item {
  padding: 12px 20px;
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: all 0.3s;
}

.menu-item:hover {
  background-color: #ecf5ff;
}

.menu-item.active {
  background-color: #faecff;
}

.menu-icon {
  width: 24px;
  height: 24px;
  margin-right: 10px;
}

.menu-text {
  font-size: 14px;
}

.search-operation-container {
  height: 32px;
  display: flex;
  align-items: center;
}

/* 自定义下拉菜单位置：菜单出现在按钮右侧 */
:deep(.operation-dropdown) {
  left: auto !important;
  top: 0 !important;
  transform: translate(100%, 0) !important;
  margin: 0 !important;
}

:deep(.operation-dropdown .el-dropdown-menu) {
  width: auto !important;
  min-width: 100% !important;
  box-sizing: border-box;
}
</style>
